<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全等三角形思维导图手抄报生成器</title>
    
    <!-- 国内CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-gray-100">
    <!-- 顶部工具栏 -->
    <div class="bg-white shadow-lg p-4">
        <div class="max-w-7xl mx-auto flex items-center justify-between">
            <h1 class="text-2xl font-bold text-gray-800">
                <i class="fas fa-project-diagram text-blue-600 mr-2"></i>
                全等三角形思维导图手抄报生成器
            </h1>
            <div class="flex space-x-4">
                <button id="exportPNG" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
                    <i class="fas fa-image mr-2"></i>导出PNG
                </button>
                <button id="exportPDF" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
                    <i class="fas fa-file-pdf mr-2"></i>导出PDF
                </button>
                <button id="clearCanvas" class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700">
                    <i class="fas fa-trash mr-2"></i>清空画布
                </button>
            </div>
        </div>
    </div>

    <!-- 侧边工具栏 -->
    <div class="flex">
        <div class="w-64 bg-white shadow-lg h-screen p-4">
            <h3 class="text-lg font-semibold mb-4">工具箱</h3>
            
            <!-- 预设模板 -->
            <div class="mb-6">
                <h4 class="text-sm font-medium text-gray-700 mb-2">预设模板</h4>
                <button id="loadTemplate" class="w-full bg-gray-200 text-gray-700 px-3 py-2 rounded hover:bg-gray-300 mb-2">
                    加载全等三角形模板
                </button>
            </div>

            <!-- 颜色主题 -->
            <div class="mb-6">
                <h4 class="text-sm font-medium text-gray-700 mb-2">颜色主题</h4>
                <div class="space-y-2">
                    <button class="theme-btn w-full text-left px-3 py-2 rounded" data-theme="blue">
                        <span class="inline-block w-4 h-4 bg-blue-500 rounded mr-2"></span>蓝色主题
                    </button>
                    <button class="theme-btn w-full text-left px-3 py-2 rounded" data-theme="green">
                        <span class="inline-block w-4 h-4 bg-green-500 rounded mr-2"></span>绿色主题
                    </button>
                    <button class="theme-btn w-full text-left px-3 py-2 rounded" data-theme="purple">
                        <span class="inline-block w-4 h-4 bg-purple-500 rounded mr-2"></span>紫色主题
                    </button>
                </div>
            </div>

            <!-- 节点工具 -->
            <div class="mb-6">
                <h4 class="text-sm font-medium text-gray-700 mb-2">节点工具</h4>
                <button id="addNode" class="w-full bg-indigo-600 text-white px-3 py-2 rounded hover:bg-indigo-700 mb-2">
                    <i class="fas fa-plus mr-2"></i>添加节点
                </button>
                <button id="addConnection" class="w-full bg-gray-600 text-white px-3 py-2 rounded hover:bg-gray-700">
                    <i class="fas fa-link mr-2"></i>添加连接线
                </button>
            </div>

            <!-- 纸张设置 -->
            <div class="mb-6">
                <h4 class="text-sm font-medium text-gray-700 mb-2">纸张设置</h4>
                <select id="paperSize" class="w-full border rounded px-3 py-2">
                    <option value="a4">A4 (210×297mm)</option>
                    <option value="a3">A3 (297×420mm)</option>
                </select>
                <select id="paperOrientation" class="w-full border rounded px-3 py-2 mt-2">
                    <option value="portrait">纵向</option>
                    <option value="landscape">横向</option>
                </select>
            </div>
        </div>

        <!-- 主画布区域 -->
        <div class="flex-1 p-4">
            <div class="bg-white rounded-lg shadow-lg h-full">
                <canvas id="canvas" class="w-full h-full"></canvas>
            </div>
        </div>
    </div>

    <!-- 节点编辑弹窗 -->
    <div id="nodeModal" class="fixed inset-0 bg-black bg-opacity-50 hidden">
        <div class="flex items-center justify-center h-full">
            <div class="bg-white rounded-lg p-6 w-96">
                <h3 class="text-lg font-semibold mb-4">编辑节点</h3>
                <input type="text" id="nodeText" class="w-full border rounded px-3 py-2 mb-4" placeholder="节点内容">
                <input type="color" id="nodeColor" class="w-full h-10 mb-4">
                <div class="flex justify-end space-x-2">
                    <button id="cancelEdit" class="bg-gray-300 px-4 py-2 rounded">取消</button>
                    <button id="saveNode" class="bg-blue-600 text-white px-4 py-2 rounded">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
</body>
</html>
